<template>
  <div class="com-page" :style="containerStyle">
    <div class="hander" >
      <img :src="logoSrc" class="img">
      <span class="title" :style="containerStyle">电商平台实时监控系统</span>
      <div class="time" :style="containerStyle"><img class="img-change" :src="themeSrc" @click="handleChangeTheme" >{{timeData}}</div>
    </div>

    <div class="screen-body" >
      <div class="left">
        <!-- 销售趋势图表 -->
        <div class="left-left" :id="[fullScreenStatus.trend ? 'fullscreen':'']">
          <div class="resize" @click="changSize('trend')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.trend ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Trend ref="trend"></Trend>
        </div>
        <!-- 销售金额图表 -->
        <div class="left-botton" :id="[fullScreenStatus.seller ? 'fullscreen':'']">
          <div class="resize" @click="changSize('seller')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.seller ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Seller ref="seller"></Seller>
        </div>
      </div>
      <div class="center">
        <!-- 商家分布图表 -->
        <div class="center-center" :id="[fullScreenStatus.map ? 'fullscreen':'']">
          <div class="resize" @click="changSize('map')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.map ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Map ref="map"></Map>
        </div>
        <!-- 地区销售排行图表 -->
        <div class="center-botton" :id="[fullScreenStatus.rank ? 'fullscreen':'']">
          <div class="resize" @click="changSize('rank')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.rank ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Rank ref="rank"></Rank>
        </div>
      </div>
      <div class="right">
        <!-- 热销占比图表 -->
        <div class="right-right" :id="[fullScreenStatus.screen ? 'fullscreen':'']">
          <div class="resize" @click="changSize('screen')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.screen ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Screen ref="screen"></Screen>
        </div>
        <!-- 库存销量分析图表 -->
        <div class="right-botton" :id="[fullScreenStatus.stock ? 'fullscreen':'']">
          <div class="resize" @click="changSize('stock')">
            <!-- icon-compress-alt -->
            <!-- icon-expand-alt -->
            <span :class="['iconfont',fullScreenStatus.stock ? 'icon-expand-alt' : 'icon-compress-alt']"></span>
          </div>
          <Stock ref="stock"></Stock>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/Map'
import Rank from '@/components/Rank'
import Screen from '@/components/Screen'
import Seller from '@/components/Seller'
import Trend from '@/components/Trend'
import Stock from '@/components/Stock'
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
  components: { Map, Rank, Screen, Seller, Stock, Trend },
  data () {
    return {
      fullScreenStatus: {
        map: false,
        rank: false,
        screen: false,
        seller: false,
        stock: false,
        trend: false
      },
      timeData: ''
    }
  },
  methods: {
    changSize (name) {
      // this.fullScreenStatus[name] = !this.fullScreenStatus[name]
      // // screenAdapter
      // this.$nextTick(() => {
      //   this.$refs[name].screenAdapter()
      // })
      const targetValue = !this.fullScreenStatus[name]
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: name,
        value: targetValue
      })
    },
    // 接收到全屏数据之后的处理
    recvData (data) {
      // 取出是哪一个图表需要进行切换
      const chartName = data.chartName
      // 取出, 切换成什么状态
      const targetValue = data.value
      this.fullScreenStatus[chartName] = targetValue
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter()
      })
    },
    setiven () {
      setInterval(() => {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        const gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
        this.timeData = gettime
      }, 1000)
    },
    handleChangeTheme () {
      // 修改VueX中数据
      // this.$store.commit('changeTheme')
      this.$socket.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName: '',
        value: ''
      })
    },
    recvThemeChange () {
      this.$store.commit('changeTheme')
    }
  },

  computed: {
    logoSrc () {
      // eslint-disable-next-line no-undef
      return '/static/img/' + getThemeValue(this.theme).logoSrc
    },
    // headerSrc () {
    //   // eslint-disable-next-line no-undef
    //   return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
    // },
    themeSrc () {
      // eslint-disable-next-line no-undef
      return '/static/img/' + getThemeValue(this.theme).themeSrc
    },
    containerStyle () {
      return {
        // eslint-disable-next-line no-undef
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        // eslint-disable-next-line no-undef
        color: getThemeValue(this.theme).titleColor
      }
    },
    // eslint-disable-next-line no-undef
    ...mapState(['theme'])
  },

  mounted () {
    this.setiven()
    console.log(this)
  },
  created () {
    // 注册接收到数据的回调函数
    this.$socket.registerCallBack('fullScreen', this.recvData)
    this.$socket.registerCallBack('themeChange', this.recvThemeChange)
  },
  destroyed () {
    this.$socket.unRegisterCallBack('fullScreen')
    this.$socket.unRegisterCallBack('themeChange')
  }
}
</script>

<style scoped lang='less'>
.com-page {
  background-color: #161522;
}
.hander {
  width: 98%;
  height: 60px;
  margin: 0 auto;
  background-image: url(../assets/image/header_border_dark.png);
  background-size: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img {
  height: 30px;
  margin-bottom: 10px;
}
.title {
  position: absolute;
  color: #fff;
  font-size: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.time {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  img {
    width: 25px;
    margin-right: 5px;
  }
}
.screen-body {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    .left-left {
      height: 53%;
      position: relative;
    }
    .left-botton {
      height: 31%;
      margin: 20px 0 90px 0;
      position: relative;
    }
  }
  .center {
    width: 40%;
    height: 100%;
    margin: 0 20px;
    .center-center {
      height: 56%;
      position: relative;
    }
    .center-botton {
      height: 28%;
      margin: 20px 0 90px 0;
      position: relative;
    }
  }
  .right {
    width: 30%;
    height: 100%;
    .right-right {
      height: 46%;
      position: relative;
    }
    .right-botton {
      height: 38%;
      margin: 20px 0 90px 0;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}
#fullscreen {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 1000;
}
.img-change {
  cursor: pointer;
}
</style>
